<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="toolbarDemo">

        <div class="demoTable">

            <div class="layui-inline">

                <input class="layui-input" name="id" id="demoReload" autocomplete="off">
            </div>
            <button class="layui-btn"  id="btnserach" lay-event="reload"  placeholder ="请输入用户姓名"> 搜索</button>

            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>

        </div>

    </script>
    <div id="updatediv" style="display: none">
        <form class="layui-form" action="" lay-filter="formTest">

            <input name="uid" type="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名字</label>
                <div class="layui-input-block">
                    <input type="text" name="uname" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户密码</label>
                <div class="layui-input-block">
                    <input type="text" name="upassword" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="uemail" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户电话</label>
                <div class="layui-input-block">
                    <input type="text" name="uphone" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户备注</label>
                <div class="layui-input-block">
                    <input type="text" name="umark" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>

        layui.use(['table','form'], function(){
            var table = layui.table;
            var $ = layui.$;
            var form = layui.form;

            var depttab = table.render({
                elem: '#test'
                ,url:'../user/showall'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {field:'uid', title: 'uid', sort: true,type:"numbers"}
                    ,{field:'uname', title: 'uname'}
                    ,{field:'upassword', title: 'upassword', sort: true}
                    ,{field:'uemail', title: 'uemail', sort: true}
                    ,{field:'uphone', title: 'uphone', sort: true}
                    ,{field:'umark', title: 'umark', sort: true}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page:true
                ,done: function(res, curr, count){
                    $("#demoReload").val(res.uname);
                }
            });


            table.on('toolbar(test)', function(obj){
                if(obj.event === "add"){
                    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "uid": ""
                        ,"uname": ""
                        ,"upassword": ""
                        ,"uemail":""
                        ,"uphone":""
                        ,"umark":"",
                    });
                    var addlayer = layer.open({
                        type: 1
                        ,anim: 3
                        ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    form.on('submit(formDemo)',function (data){
                        layer.close(addlayer);
                        $.ajax({
                            url:"../user/add"
                            ,type:"post"
                            ,data: data.field
                            ,success:function (d){
                                console.log(d,typeof(d));
                                if(d === 1){
                                    layer.msg('添加成功！！！', {
                                        icon: 1,
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        //更新表格
                                        depttab.reload();
                                    });
                                }


                            }
                        });

                        return false;


                    });
                }
                else if(obj.event==="reload"){
                    console.log(encodeURIComponent($('#demoReload').val()));
                    depttab.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            uname: $('#demoReload').val()
                            // type:"post"
                        }
                    });
                }
            });

            table.on('tool(test)', function(obj){
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        //obj.del();
                        $.ajax({
                            url:'../user/delete/'+data.uid,
                            type:'delete',
                            success:function (d){
                                if(d === 1){
                                    layer.msg('删除已成功！！！', {
                                        icon: 1,
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        //更新表格
                                        depttab.reload({
                                            page: {
                                                curr: 1 //重新从第 1 页开始
                                            }
                                            ,where: {
                                                uname: null
                                            }
                                        });

                                    });
                                }

                            }
                        });

                    });
                }else if(obj.event === 'edit'){
                    var uplayer = layer.open({
                        type: 1
                        ,anim: 3
                        ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });

                    //form自动赋值
                    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "uid": data.uid
                        ,"uname": data.uname
                        ,"upassword": data.upassword
                        ,"uemail": data.uemail
                        ,"uphone": data.uphone
                        ,"umark": data.umark,
                    });

                    //提交
                    form.on('submit(formDemo)',function (data){
                        layer.close(uplayer);
                        $.ajax({
                            url:"../user/update"
                            ,type:"post"
                            ,data:data.field
                            ,success:function (d){
                                console.log(d,typeof(d));
                                if(d === 1){
                                    layer.msg('修改已成功！！！', {
                                        icon: 1,
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function(){
                                        //更新表格
                                        depttab.reload();
                                    });
                                }
                                else if(d === 0){
                                    layer.msg('修改失败，不能修改id，请重新修改',{
                                        icon: 1,
                                        time: 1500});
                                }
                            }
                        });
                        return false;
                    });
                }
            });
        });

    </script>

    </body>
    
</html>